<template>
	<el-dialog :close-on-click-modal="false" title="已安装楼盘选择" center :visible.sync="visible" fullscreen class="map-dialog" :show-close="false">
		<div slot="title" class="check-dialog-title-box">
			已安装楼盘选择
			<div class="check-dialog-close-btn flex justify-end align-center flex-no-wrap">
				<el-button icon="el-icon-circle-close" size="mini" type="primary" @click.native="visible=false">关闭</el-button>
			</div>
		</div>
		<tencent-map ref="tencentMap" :hasDateRange="false" :showCounts="false" hasAreaSelect hasTradeAreaSelect hasNameSwitch hasDonutSwitch hasSearch useNewAddressSearch hasChoose
		showInstalledNum isChooseSetting chooseBuildingOnly :hasChoosedExport="hasChoosedExport" :dateRange.sync="dateRange"
		@confirm-choose="confirmChoose"
		@export-building="exportBuilding"/>
	</el-dialog>
</template>

<script>
	import TencentMap from '@/components/TencentMap'
	import common from '@/utils/common.js';
	import {
		formatDate
	} from '@/utils/util.js'
	import {
		cloneDeep
	} from 'lodash'
	export default{
		name: 'PointPlanTencentMap',
		components: {
			TencentMap
		},
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		props:{
			dateRange: {
				type: Array,
				default: () => {
					return [formatDate(new Date()) + ' 00:00:00', formatDate(new Date()) + ' 23:59:59']
				}
			},
			hasChoosedExport:{
				type: Boolean,
				default: false
			},
		},
		mounted(){
			
		},
		data(){
			return {
				visible: false
			}
		},
		methods:{
			showMapDialog(){
				this.visible = true;
			},
			exportBuilding(buildings){
				this.$emit("export-building", buildings);
			},
			confirmChoose(info){
				const that = this
				that.$emit("choose-buildings", info);
				that.visible = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/.app-map-container{
		.qq-map-container{
			height: calc(100vh - 60px) !important;
		}
		.address-search{
			top: 60px !important;
		}
		.choosed-building-area{
			top: 68px !important;
		}
	}
	/deep/.check-dialog-title-box{
		position: relative;
		height: 30px;
		line-height: 30px;
		padding: 0;
	
		.check-dialog-close-btn{
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
		}
	}
	
</style>
